<template>
    <div class="login" >
        <div class="user-img">
            <img src="./../../assets/xingxing.png" >
        </div>
        <div class="log">
            <p>18537272294</p>
        </div>
        <div class="remove" @click="logout">[退出]</div>
    </div>
</template>

<script>
export default {
  methods: {
    logout () {
      localStorage.removeItem('isLogin')
      this.$router.push('/user')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.login {
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    @include justify-content();
    @include align-items();
    position: relative;
    //用户头像
    .user-img {
        @include rect(0.8rem, 0.8rem);
        border-radius: 50%;
        border: 0.01rem solid #666;
        background: #fff;
        img {
            @include rect(0.8rem, 0.8rem);
            border-radius: 50%;
        }
    }
    .log {
        @include rect(100%, 0.5rem);
        line-height: 0.5rem;
        text-align: center;
        font-size: 0.2rem;
        @include margin(0.1rem 0 0 0);
        color: #666;
    }
}
.remove {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem
}
</style>
